<!--
 * @Date: 2022-03-30 17:18:11
 * @Author: 陶子
 * @LastEditTime: 2023-07-04 11:13:59
 * @FilePath: \jk_one-stop_pc\src\views\dashboard\otherApply.vue
 * @pageName: 这是--(已处理申请 | 已发起申请 | 抄送给我的申请)--页面
-->
<template>
  <div class="pagebox">
    <crumbs @goBack="goBack" :superiorMenu="['首页']" :currentMenu="currentTitle" style="margin-bottom: 12px"></crumbs>
    <a-card :bordered="false" size="small" style="height: 100%">
      <a-table
        row-key="id"
        :columns="columns"
        :data-source="tableData"
        :pagination="false"
        :scroll="{ x: computedX, y: 'calc(100vh - 275px)' }"
      >
        <!-- 插槽显示 -->
        <span
          slot="applyNo"
          class="pubColor"
          slot-scope="text, record"
          @click="allKindsOfDetail(record)"
          :title="record.applyNo"
          >{{ record.applyNo }}</span
        >
        <!-- 操作 -->
        <span slot="flowStatusName" slot-scope="text, record" :style="{ color: checkStatus(record.flowStatus) }">{{
          text
        }}</span>
      </a-table>
    </a-card>
    <div class="uni-card pagination-contian" :style="{ left: collapsed ? '219px' : '90px' }">
      <div class="check-contain">
        <span>
          {{ `共${total} 条` }}
        </span>
      </div>
      <div class="page-contain">
        <a-pagination
          :total="total"
          v-model="current"
          :page-size-options="pageSizeOptions"
          :page-size="pageSize"
          @change="onChangePage"
          @showSizeChange="onShowSizeChange"
          show-quick-jumper
          show-size-changer
        />
      </div>
    </div>
    <applyDeliverDetail ref="applyDeliverDetail"></applyDeliverDetail>
    <applyPayDetail ref="applyPayDetail"></applyPayDetail>
    <receiptDetail ref="receiptDetail"></receiptDetail>
    <!-- <purchaseDetail ref="purchaseDetail"></purchaseDetail> -->
    <supplierDetail ref="supplierDetail"></supplierDetail>
    <!-- <qualifiedInputDetail ref="qualifiedInputDetail"></qualifiedInputDetail> -->
    <addMaterialRequisitionDetail ref="addMaterialRequisitionDetail"></addMaterialRequisitionDetail>
    <materialRequisitionDetail ref="materialRequisitionDetail"></materialRequisitionDetail>
    <qualityDetail ref="qualityDetail"></qualityDetail>
    <recordDetail ref="recordDetail"></recordDetail>
    <executionDetail ref="executionDetail"></executionDetail>
    <returnMaterialDetail ref="returnMaterialDetail"></returnMaterialDetail>
    <salesContractDetail ref="salesContractDetail"></salesContractDetail>
    <customerDetail ref="customerDetail"></customerDetail>
    <goodsManagementDetail ref="goodsManagementDetail"></goodsManagementDetail>
    <warehouseDetail ref="warehouseDetail"></warehouseDetail>
    <stockAllocationDetail ref="stockAllocationDetail"></stockAllocationDetail>
    <repairDetail ref="repairDetail"></repairDetail>
    <stockCheckDetail ref="stockCheckDetail"></stockCheckDetail>
  </div>
</template>
<script>
import { otherApplyApi } from '@/api/erpApi'
import crumbs from '@/components/crumbs.vue'
import { mapState } from 'vuex'
let columns = [
  {
    title: '申请单号',
    dataIndex: 'applyNo',
    ellipsis: true,
    width: '20%',
    scopedSlots: {
      customRender: 'applyNo',
    },
  },
  {
    title: '申请标题',
    dataIndex: 'title',
    ellipsis: true,
    width: '20%',
  },
  {
    title: '申请类型',
    dataIndex: 'typeName',
    ellipsis: true,
    width: '15%',
  },
  {
    title: '发起时间',
    dataIndex: 'flowLaunchTime',
    ellipsis: true,
    width: '20%',
  },
  {
    title: '完成时间',
    dataIndex: 'flowFinishTime',
    ellipsis: true,
    width: '15%',
  },
  {
    title: '状态',
    dataIndex: 'flowStatusName',
    width: '10%',
    scopedSlots: { customRender: 'flowStatusName' },
  },
]

export default {
  components: {
    crumbs,
    applyDeliverDetail: (resolve) => require(['@/views/apply/applyDeliverDetail'], resolve),
    applyPayDetail: (resolve) => require(['@/views/apply/applyPayDetail'], resolve),
    receiptDetail: (resolve) => require(['@/views/procurementManagement/purchaseContract/receiptDetail'], resolve),
    // purchaseDetail: (resolve) =>
    //   require(['@/views/procurementManagement/purchaseContract/purchaseDetail.vue'], resolve),
    supplierDetail: (resolve) =>
      require(['@/views/procurementManagement/supplierManagement/supplierDetail.vue'], resolve),
    // qualifiedInputDetail: (resolve) => require(['@/views/workManagement/qualifiedInput/qualifiedInputDetail'], resolve),
    addMaterialRequisitionDetail: (resolve) =>
      require(['@/views/workManagement/addMaterialRequisition/addMaterialRequisitionDetail'], resolve),
    materialRequisitionDetail: (resolve) =>
      require(['@/views/workManagement/materialRequisition/materialRequisitionDetail'], resolve),
    qualityDetail: (resolve) => require(['@/views/qualityManagement/qualityRecord/qualityDetail'], resolve),
    recordDetail: (resolve) => require(['@/views/workManagement/reportRecord/recordDetail'], resolve),
    executionDetail: (resolve) => require(['@/views/workManagement/defectsDeal/executionDetail'], resolve),
    returnMaterialDetail: (resolve) => require(['@/views/workManagement/returnMaterial/returnMaterialDetail'], resolve),
    salesContractDetail: (resolve) => require(['@/views/salesManagement/salesContract/salesContractDetail'], resolve),
    customerDetail: (resolve) => require(['@/views/salesManagement/customerManagement/customerDetail'], resolve),
    goodsManagementDetail: (resolve) =>
      require(['@/views/warehouseManagement/goodsManagement/goodsManagementDetail'], resolve),
    warehouseDetail: (resolve) => require(['@/views/warehouseManagement/warehouse/warehouseDetail'], resolve),
    stockAllocationDetail: (resolve) =>
      require(['@/views/warehouseManagement/stockAllocation/stockAllocationDetail'], resolve),
    repairDetail: (resolve) => require(['@/views/baseManagement/maintain/repairDetail'], resolve),
    stockCheckDetail: (resolve) => require(['@/views/warehouseManagement/stockCheck/stockCheckDetail'], resolve),
  },
  data() {
    return {
      columns,
      tableData: [],
      current: 1,
      total: 0,
      pageSize: 10,
      pageSizeOptions: ['10', '20', '30', '40', '50'],
      currentTitle: '',
      applyType: '',
    }
  },
  computed: {
    ...mapState({
      collapsed: (state) => state.user.collapsedAno,
    }),
    computedX() {
      let xnum = 0
      for (let item of this.columns) {
        xnum += Number(item.width)
      }

      return xnum
    },
  },
  created() {
    this.applyType = this.$route.query.applyType
    if (this.applyType == 'copyToMe') {
      this.currentTitle = '抄送给我的申请'
    }
    let obj = {
      pageNo: this.current,
      pageSize: this.pageSize,
    }
    this.getData(obj)
  },
  methods: {
    allKindsOfDetail(row) {
      let detailUrl = ''
      switch (row.type) {
        case 'ERP_SHIPPING_APPLY': //申请发货——对应详情
          detailUrl = 'applyDeliverDetail'
          break
        case 'ERP_PURCHASE_TASK_APPLY': //申请采购——对应详情
          detailUrl = 'applyPayDetail'
          break
        case 'ERP_PURCHASE_SIGN_ORDER': //采购合同签收——对应详情
          detailUrl = 'receiptDetail'
          break
        case 'ERP_PURCHASE_CONTRACT': //新建采购合同——对应详情
          detailUrl = 'purchaseDetail'
          break
        case 'ERP_SUPPLIER': //新建供应商——对应详情
          detailUrl = 'supplierDetail'
          break
        case 'MESS_QUALIFIED_INBOUND_APPLY': //合格品申请入库——对应详情
          detailUrl = 'qualifiedInputDetail'
          break
        case 'MESS_REMEDY_MATERIAL_APPLY': //申请补料——对应详情
          detailUrl = 'addMaterialRequisitionDetail'
          break
        case 'MESS_RECEIVE_MATERIAL_APPLY': //申请领料——对应详情
          detailUrl = 'materialRequisitionDetail'
          break
        case 'MESS_TASK_REPORT_WORK_APPLY_FOR_QUALITY': //质检报工——对应详情
          detailUrl = 'qualityDetail'
          break
        case 'MESS_TASK_REPORT_WORK_APPLY_FOR_PRODUCT': //生产报工——对应详情
          detailUrl = 'recordDetail'
          break
        case 'MESS_SCRAP_INBOUND_APPLY': //申请报废入库——对应详情
          detailUrl = 'executionDetail'
          break
        case 'MESS_RETURN_MATERIAL_APPLY': //申请退料——对应详情
          detailUrl = 'returnMaterialDetail'
          break
        case 'ERP_SALE_CONTRACT': //新建销售合同——对应详情
          detailUrl = 'salesContractDetail'
          break
        case 'ERP_CUSTOMER': //新建客户——对应详情
          detailUrl = 'customerDetail'
          break
        case 'WMS_GOODS': //新建物品——对应详情
          detailUrl = 'goodsManagementDetail'
          break
        case 'WMS_WAREHOUSE': //新建仓库——对应详情
          detailUrl = 'warehouseDetail'
          break
        case 'WMS_STOCK_ALLOT': //库存调拨——静态路由
          detailUrl = 'stockAllocationDetail'
          break
        case 'MESS_DEVICE_REPAIR': //设备管理——故障报修
          detailUrl = 'repairDetail'
          break
        case 'WMS_WAREHOUSE_INVENTORY': //仓库管理-库存盘点详情
          detailUrl = 'stockCheckDetail'
          break
      }
      let paramsObj = null
      if (row.type == 'ERP_SHIPPING_APPLY') {
        paramsObj = {
          applyNo: row.applyNo,
        }
      } else {
        paramsObj = row.entityId
      }
      this.$refs[detailUrl].initDetail(paramsObj)
    },
    checkStatus(status) {
      let colorStr = ''
      switch (status) {
        case 'AGREE':
          colorStr = '#00b042'
          break
        case 'RUNNING':
          colorStr = '#1890ff'
          break
        case 'TERMINATED':
          colorStr = '#888888'
          break
        case 'REFUSE':
          colorStr = '#ff4d4f'
          break
      }
      return colorStr
    },
    /* 面包屑返回 */
    goBack() {
      this.$router.go(-1)
    },
    getData(obj) {
      let queryType = ''
      if (this.applyType == 'copyToMe') {
        queryType = 'noticeMe'
      }
      let params = {
        ...obj,
        queryType,
      }
      otherApplyApi(params).then((res) => {
        if (res.success) {
          if (res.result.total) {
            this.total = res.result.total
          } else {
            this.total = 0
          }
          let copyArr = JSON.parse(JSON.stringify(res.result.records))
          for (let item of copyArr) {
            for (let each in item) {
              if (!item[each] && item[each] != 0) {
                item[each] = '--'
              }
            }
          }
          this.tableData = copyArr
        } else {
          this.$antdMessage.warning(res.message)
        }
      })
    },
    // 分页
    onChangePage(current, pageSize) {
      this.current = current
      let obj = {
        pageNo: this.current,
        pageSize: this.pageSize,
      }

      this.getData(obj)
    },
    onShowSizeChange(current, pageSize) {
      this.pageSize = pageSize
      this.current = 1
      let obj = {
        pageNo: this.current,
        pageSize: this.pageSize,
      }
      this.getData(obj)
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.flex(@jc,@ai,@fd:row) {
  display: flex;
  justify-content: @jc;
  align-items: @ai;
  flex-direction: @fd;
}
.table-operations {
  margin-bottom: 16px;
}

.table-operations > button {
  margin-right: 8px;
}

.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}
.pubColor {
  font-size: 14px;
  color: #1890ff;
  cursor: pointer;
}
.pagebox {
  /deep/ .ant-card-body {
    height: calc(100vh - 174px);
    overflow: hidden;
    padding: 20px 16px;
  }
}
.filter-tit {
  background: #fff;
  border-bottom: 1px solid @greyBorder;
  font-size: @fontSize4;
}
.filter-num {
  color: @normalFont;
}
.filter-body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.margin-btn {
  margin-right: @distance5;
}
.filter-tag {
  display: inline-block;
  position: relative;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: @fontSize1;
  line-height: @fontSize1;
  max-width: 100%;
  background: @greyBg;
  color: @titFont;
  cursor: pointer;
  .tag-text {
    display: inline-block;
    padding-right: 20px;
    max-width: 100%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .anticon-close {
    position: absolute;
    right: 8px;
    top: 8px;
  }
}
.tag-wrap:nth-of-type(n + 2) {
  margin-top: 10px;
}
.searchWorkOreder {
  .flex(flex-start, center);
  padding: 8px;
}
.modalTopBox {
  .flex(flex-start, center);
  margin-bottom: 8px;
  span {
    margin-left: 16px;
    display: block;
    overflow: hidden;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.4;
  }
}
.bigFont {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.78);
  box-sizing: border-box;
  padding-left: 12px;
  margin-bottom: 8px;
  font-weight: 600;
}
.smallFont {
  font-size: 14px;
  box-sizing: border-box;
  padding-left: 12px;
}
</style>
